<template>
  <div>
    <el-form-item label="发送好友" prop="friendsList">
      <el-form-item label="">
        <el-input placeholder="请输入好友微信昵称" type="text" v-model="name" />
      </el-form-item>
      <el-button style="margin-left: 8px" type="primary" @click="handleSearch">
        <el-icon>
          <Search />
        </el-icon>
        查询
      </el-button>
      <el-button @click="resetForm">
        <el-icon>
          <RefreshLeft />
        </el-icon>
        重置
      </el-button>
      <el-button type="primary" @click="handleAdd()">
        <el-icon><Plus /></el-icon>添加</el-button
      >
    </el-form-item>
    <el-table
      style="margin-top: 4px"
      border
      :data="tableList"
      max-height="250px"
      size="small"
    >
      <el-table-column prop="managerName" label="机器人名称" />
      <el-table-column prop="wxUserName" label="好友微信昵称" />
      <el-table-column prop="realUserName" label="姓名" />
      <el-table-column label="操作" width="60">
        <template #default="scope">
          <el-link
            :underline="false"
            link
            type="danger"
            size="small"
            @click.prevent="handleDel(scope.row)"
            >移除</el-link
          >
        </template>
      </el-table-column>
    </el-table>
    <SelectFriends
      v-if="visibleSelectPop"
      v-model:dialogVisible="visibleSelectPop"
      v-model:selecedList="selecedList"
      title="选择好友"
    ></SelectFriends>
  </div>
</template>

<script setup lang="ts">
import openMsgBox from '@/hooks/messageBox.js'

const props = defineProps({
  tableData: {
    type: Array,
  },
})
const emits = defineEmits(['update:tableData'])
const name = ref('')
const visibleSelectPop = ref(false)
const selecedList = ref([])
const tableList = ref([])
watch(
  () => selecedList.value,
  (val) => {
    tableList.value = [...val]
    emits('update:tableData', tableList.value)
  }
)
const handleSearch = () => {
  if (!name.value) return
  tableList.value = selecedList.value.filter(
    (e) => e.wxUserName.indexOf(name.value) > -1
  )
}
const resetForm = () => {
  name.value = ''
  tableList.value = [...selecedList.value]
}
const handleAdd = () => {
  visibleSelectPop.value = true
}
const handleDel = (row) => {
  openMsgBox(
    {
      tips: '确定要移除吗？',
    },
    () => {
      selecedList.value = selecedList.value.filter((e) => e.id !== row.id)
    },
    () => {
      handleSearch()
    }
  )
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
